<template>
    <div class="banner">
      <!-- <img src="../../assets/images/banner.png" width="100%" alt=""> -->
      <div>
        <Row>
            <i-col span="5" offset='15'>
              <div class="login-card">
                <h3 style="color:#333333;text-align:center;">快速融资通道</h3>
                <div class="marginT10">
                  <i-form :model="loanForm" label-position="right" :label-width="100">
                    <Form-item label="期望贷款金额" class="f12 mtop10">
                        <Row>
                          <i-col span="20"><i-input v-model="loanForm.loanAmount" size='small'></i-input></i-col>
                          <i-col span="3" offset='1'>万</i-col>
                        </Row>
                    </Form-item>
                    <Form-item label="期望贷款期限" class="f12 mtop-10">
                      <Row>
                          <i-col span="12"><i-input v-model="loanForm.loanPeriod" size='small'></i-input></i-col>
                          <i-col span="7" offset='1'>
                            <i-select v-model="loanForm.periodUnit" placeholder="" size='small'>
                              <i-option value="1">年</i-option>
                              <i-option value="0">月</i-option>
                            </i-select>
                          </i-col>
                      </Row>
                    </Form-item>
                    <Form-item label="抵押方式" class="f12 mtop-10">
                      <Row>
                          <i-col span="20">
                            <i-select v-model="loanForm.mortgagePattern" placeholder="" size='small'>
                              <i-option v-for="item in mortgageWayList" :key="item.kwKey" :value="item.kwKey">{{item.kwValue}}</i-option>
                            </i-select>
                          </i-col>
                      </Row>
                        
                    </Form-item>
                  </i-form> 
                  <div class="marginT20" style="margin-top:30px;margin-bottom:11px;">
                    <Row>
                      <i-col span="10" offset='7'>
                        <button @click="goApply" class="applyNow">立即申请</button>
                      </i-col>
                    </Row>
                  </div>
                </div>
              </div>
            </i-col>
            
        </Row>
      </div>
      <div>
        <Row>
          <i-col span="18" offset='3'>
            <div class="relativeInfo">
              <dl>
                <dt><img src="../../assets/images/企业信息@2x.png" alt width="40px"/></dt>
                <dd>
                  <p><b>{{infoAggrehation.entCount}}</b>家</p>
                  <p>注册企业</p>
                </dd>
              </dl>
              <dl>
                <dt><img :src="financingNeeds" alt width="40px"/></dt>
                <dd>
                  <p><b>{{infoAggrehation.loanAmt}}</b>亿</p>
                  <p>融资需求</p>
                </dd>
              </dl>
              <!-- <dl>
                <dt><img :src="dockingRequirements" alt width="40px"/></dt>
                <dd>
                  <p><b>3,458</b>家</p>
                  <p>对接需求</p>
                </dd>
              </dl> -->
              <dl>
                <dt><img :src="financialInstitution" alt width="40px"/></dt>
                <dd>
                  <p><b>{{infoAggrehation.orgCount}}</b>家</p>
                  <p>金融机构</p>
                </dd>
              </dl>
              <dl>
                <dt><img :src="financialProducts" alt width="40px"/></dt>
                <dd>
                  <p><b>{{infoAggrehation.proCount}}</b>款</p>
                  <p>金融产品</p>
                </dd>
              </dl>
            </div>
          </i-col>
        </Row>
      </div>
    </div>

</template>
<script>
import registeCompany from '@/assets/images/注册企业.png'
import financingNeeds from '@/assets/images/融资需求.png'
import dockingRequirements from '@/assets/images/对接需求 .png'
import financialInstitution from '@/assets/images/金融机构.png'
import financialProducts from '@/assets/images/金融产品.png'

export default {
    name:'financingChannel',
    props:["infoAggrehation"],
    data() {
        return {
            registeCompany,
            financingNeeds,
            dockingRequirements,
            financialInstitution,
            financialProducts,
            loanForm: {
              loanAmount:'',
              loanPeriod:'',
              periodUnit:'',
              mortgagePattern:''
            },
            mortgageWayList:[]
        }
    },
    mounted(){
      // let swiperObj = {
      //   pageIndex: 0,
      //   pageSize: 2,
      //   proCode: window.areaArr[0]?window.areaArr[0]:"",
      //   cityCode: window.areaArr[1]?window.areaArr[1]:"",
      //   countyCode:  window.areaArr[2]?window.areaArr[2]:"",
      //   level: 1,
      //   ownPage: 1
      // };
      // this.$axios("getswiperPics", [], swiperObj).then(res => {
      //   if (res.code == 200) {
      //     // this.platformAdbg = res.data.result[0].imageUrl;
      //   }
      // });
      this.getMortgageWay()
    },
    methods:{
      getMortgageWay(){
          this.$axios('loangetDict',['MORTAGE_MODE'],{}).then(res=>{
            if(res.code==200){
              this.mortgageWayList=res.data.result
            }
          })
      },
      goApply(){
        this.$emit('loan',this.loanForm)
      }
    }
}
</script>

<style scoped>
.banner{
  height: 520px;
  background: url('../../assets/images/banner.png') no-repeat top center;
}
.module-title{
  margin: 0 auto;
  margin-top: 40px;
  text-align: center;
}
.login-card{
  border-radius: 5px;
  margin-top: 30px;
  background-color: #e8f4fd;
  padding: 30px 10px;
}
.applyNow {
  width: 120px;
  display: inline-block;
  border: 1px solid #00A573;
  padding: 3px 25px;
  background: #00A573;
  color: #fff;
  font-size: 14px;
  border-radius: 3px;
}
.relativeInfo{
  border: 1px solid #fff;
  height: 120px;
  margin-top: 50px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 5px 5px 10px #ccc;
}
.relativeInfo dl{
  display: inline-block;
  margin-top: 25px;
  width: 24.9%;
  height: 60px;
}
.relativeInfo dl dt,.relativeInfo dl dd{
  display: inline-block;
}
.relativeInfo dl dt{
  margin-left: 40px;
}
.relativeInfo dl dd b{
  font-size: 20px;
  margin-right: 5px;
}
.relativeInfo dl dd{
  margin-left: 15px;
}
.relativeInfo dl:not(:last-child){
  border-right: 1px solid #EBEBEB;
}
.mtop-10{
  margin-top: -10px;
}
.mtop10{
  margin-top: 15px;
}
</style>